<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业1样式.css">
</head>
<body>
    <h4 align="center">积云教育-全栈</h4>
    <div class="box">
        <h1 align="center">任务记录</h1>
        <p><input type="text" class="a1"> <button onclick="add()">添加</button></p>
        <table>
            <thead>
                <tr>
                    <th>需要完成的任务</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    
                </tr>
            </tbody>
        </table>
    </div>
    
</body>
</html>
<script>
    var a1=document.querySelector('.a1')
    //获取时间
    function getTime(){
        var date=new Date();
        var year=date.getFullYear();
        var mouth=date.getMonth()+1;
        var day=date.getDate();
        var hour=date.getHours();
        var min=date.getMinutes();
        var s=date.getSeconds()
        var day1=date.getDay();
        var week='日一二三四五六';
        return `${year}年${mouth}月${day}日${hour}:${min}:${s}星期${week[day1]}`;
    }
    var tbody=document.querySelector('tbody')
    function add(){
        console.log(a1.value);
        //创建
        var tr=document.createElement('tr');
        //赋值
        tr.innerHTML=`
            <td class="b1">${a1.value}</td>
            <td class="b1">${getTime()}</td>
            <td><button onclick="change(this)">完成</button><button onclick="del(this)">删除</button></td>
        `;
        //添加
        tbody.appendChild(tr)
        a1.value='';
    }
    function del(aaa){
        tbody.removeChild(aaa.parentNode.parentNode)
    }
    function change(aaa){
        var b1=document.querySelectorAll('.b1');
        var bbb=aaa.parentNode.parentNode
        
        bbb.style.textDecoration='line-through';
        
    }
</script>